<!--
 * @Descripttion: 新增通用弹窗 成功和失败弹窗
 * @Author: 段振宇
 * @version: 
 * @Date: 2022-04-26 11:56:59
 * @LastEditors: 段振宇
 * @LastEditTime: 2022-06-16 10:09:52
-->
<template>
  <el-dialog
    :title="params.title"
    :visible.sync="params.centerDialogVisible"
    width="30%"
    @close="clearParams"
  >
    <el-form
      v-if="isShow === 'importFile'"
      label-width="80px"
      style="width:90%;margin:0 auto"
    >
      <el-form-item label="选择文件">
        <el-upload
          action="#"
          accept=".xlsx,.xls"
          :show-file-list="false"
          :auto-upload="false"
          :on-change="changeUpload"
          style="display:flex"
        >
          <el-input
            v-model="fileName"
            disabled
            placeholder="请选择上传文件..."
          ></el-input>
          <el-button type="primary" class="upload_btn">
            <div class="fa fa-folder-open"></div>
            添加文件
          </el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="导入说明">
        <div>1、仅支持Excel格式文件；</div>
        <div>2、单次最大导入量10万条，总导入量30万条；</div>
        <div>
          3、点击下载：<span
            @click="downLoadTemplate"
            style="color:#1DC8A4;cursor:pointer;z-index:100"
            >{{ params.downLoadFileName }}</span
          >
        </div>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitImport">导入</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { uploadFixedFile } from '@/api/notice'
export default {
  props: {
    params: {
      type: Object,
      default: function() {
        return {
          centerDialogVisible: false,
          title: '',
          importType: ''
        }
      }
    }
  },
  data() {
    return {
      isShow: 'importFile',
      fileName: '',
      file: null,
      successUser: '',
      fileMessage: ''
    }
  },
  created() {},
  mounted() {},
  methods: {
    clearParams() {
      this.params.centerDialogVisible = false
      this.isShow = 'importFile'
    },
    submitImport() {
      if (!this.file) {
        this.$message({
          type: 'warning',
          message: '请先上传文件'
        })
        return false
      }
      let formData = new FormData()
      formData.append('file', this.file)
      formData.append('importType', 'CONSULTANT')
      formData.append('userDataId', this.$parent.operateForm.userDataId)
      uploadFixedFile(
        formData,
        (res) => {
          this.clearFile()
          this.$emit('importSuccess', res)
        },
        (err) => {
          this.clearFile()
          this.$emit('importFail', err.message)
        }
      )
    },
    clearFile() {
      this.$nextTick(() => {
        this.file = null
        this.fileName = ''
      })
    },
    changeUpload(file, fileList) {
      //校验格式
      let FileExt = file.name.replace(/.+\./, '')
      if (FileExt !== 'xlsx' && FileExt !== 'xls') {
        this.$message({ message: '文件格式错误！', type: 'warning' })
        return
      }
      this.fileName = file.name
      this.file = file.raw
    },
    downLoadTemplate() {
      let url = '/messages/template/job-number/download'
      let title = '导入工号表'
      this.msgDown('get', url, {}, title)
    }
  }
}
</script>

<style lang="less" scoped>
.success-box {
  width: 100%;
  height: 200px;
  display: grid;
  grid-template-columns: repeat(100%);
  grid-template-rows: 100px 30px 70px;
  padding-bottom: 20px;
}
.gird-title {
  color: #dd0000;
  font-size: 30px;
}
.gird-content {
  color: #333333;
  font-size: 20px;
}
.grid-center {
  display: grid;
  justify-items: center;
  align-items: center;
}
:deep(.el-upload) {
  display: flex !important;
}
:deep(.dialog-footer) {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
